# jQuery Mobile Themes

« Previous
Next Chapter »

## jQuery Mobile Themes

jQuery Mobile provides two different style themes, "a" and "b" - each with different colors for buttons, bars, content blocks, and so on.

To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter:

<div data-role="page" data-theme="a|b">

Value | Description | Example
--- | --- | ---

a

Black text on a light gray background for page content
Black text on a gray background for headers and footers
Black text on a light gray background for buttons
White text on a blue background for active buttons
Blue text on links
Light gray text (placeholder) or black text (value) on a white background for input fields

Try it

b

White text on a dark gray background for page content
White text on a dark gray background for headers and footers
White text on a charcoal background for buttons
White text on a "cyan" blue background for active buttons
"Cyan" blue text on links
Gray text (placeholder) or white text (value) on a black background for input fields

Try it

For buttons with class="ui-btn", use the "ui-btn-a|b" class to style the button either gray (default) or black:

<a href="#" class="ui-btn ui-btn-a|b">Button</a>

| The "a" theme is used for most elements, and child elements often inherits the theme of its parent (or page).

## Theming Header and Footer

## Example

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Try it yourself »

## Theming Header and Footer in Dialogs

## Example

<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Try it yourself »

## Theming Buttons

## Example

<a href="#" class="ui-btn ui-btn-b">Black Button</a>
Try it yourself »

## Theming Icons

## Example

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>
Try it yourself »

## Theming Popups

## Example

<div data-role="popup" id="myPopup" data-theme="b">
Try it yourself »

## Theming Buttons in Header and Footer

## Example

<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Try it yourself »

## Theming Navigation Bars

## Example

<div data-role="footer" data-theme="b">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>
Try it yourself »

## Theming Panels

## Example

<div data-role="panel" id="myPanel" data-theme="b">
Try it yourself »

## Theming Collapsible Button and Content

## Example

<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Try it yourself »

## Theming Lists

## Example

<ul data-role="listview" data-theme="b">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
Try it yourself »

## Theming Split Buttons

## Example

<ul data-role="listview" data-split-theme="b">
Try it yourself »

## Theming Collapsible Lists

## Example

<div data-role="collapsible" data-theme="b" data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Try it yourself »

## Theming Forms

## Example

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Try it yourself »

## Theming Collapsible Forms

## Example

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
Try it yourself »

## Add New Themes

jQuery Mobile also lets you add new themes to your mobile pages.

Add or edit new themes by editing the CSS file (if you have download jQuery Mobile). Just copy a block of styles and rename the classes with a letter name (c-z), and adjust colors and fonts as you like.

You can also add new styles by using theme classes in the HTML document - add the class "ui-bar-(a-z)" for toolbars, "ui-body-(a-z)" for the content and ui-page-theme-(a-z)" for the page:

## Example

<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Try it yourself »

| In previous versions of jQuery Mobile, JavaScript used to handle how an element should inherit the parent's theme. As of 1.4, the framework is focused on improved performance and JavaScript has been replaced by pure CSS. The jQuery Mobile team has created a tool, which helps you to create your own custom theme: The ThemeRoller. You can also use this tool to upgrade older themes to make them compatible with the new version.

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples